<!--
 * @Author: ybf
 * @Date: 2023-02-21 15:31:51
 * @LastEditTime: 2023-02-22 10:43:19
 * @Description: 描述
 * Copyright (c) 2023 by 慧能分享, All Rights Reserved.
-->
<template>
    <div class="parameterConfig">
        <nu-col :span="24" style="height:calc(130px - 20px);">
            <nutbTitle title="电能计量点配置查询"></nutbTitle>
            <NuVerifyForm :model="formData" ref="formData" label-width="100px" class="searchForm" @searchForm="searchForm"
                :buttons="fyButtons">
                <NuformItem label="配置查询" prop="name" width="auto">
                    <nu-input type="text" v-model="formData.name" size="middle"></nu-input>
                </NuformItem>
                <div class="btnBox">
                    <nu-button type="primary" class="searchButton" @click="searchTable">查询结果</nu-button>
                    <nu-button type="primary" class="searchButton" @click="addTable">新增配置</nu-button>
                </div>
            </NuVerifyForm>
        </nu-col>
        <nu-col :span="24" style="height: calc(100% - 130px - 20px);">
            <nutbTitle title="配置列表"></nutbTitle>
            <NuTableList :showFilter="false" :columns="columns" :dataSource="dataSource" :options="options"
                :operates="operates(this)" :pagination="pagination" @handleSizeChange="handleSizeChange"
                @handleChangePage="handleChangePage">
            </NuTableList>
        </nu-col>
        <nu-dialog :title="dialogTitle" :visible.sync="dialogShow" width="30%" center :close-on-click-modal="false"
            top="5vh" :modal-append-to-body="false" @close="diaClose">
            <div class="dialogHeaderSearch">
                <NuVerifyForm :model="dialogFormData" ref="dialogFormData" label-width="100px" class="submitForm"
                    @submitForm="diaSubmitForm" :buttons="fyButtons">
                    <NuformItem label="参数名称" prop="name" width="75%">
                        <nu-input type="text" v-model="dialogFormData.name" size="middle"></nu-input>
                    </NuformItem>
                    <NuformItem label="配置code" prop="name" width="75%">
                        <nu-input type="text" v-model="dialogFormData.code" size="middle"></nu-input>
                    </NuformItem>
                    <NuformItem label="状态" prop="name" width="75%">
                        <nu-radio v-model="dialogFormData.status" label="1">启用</nu-radio>
                        <nu-radio v-model="dialogFormData.status" label="2">禁用</nu-radio>
                    </NuformItem>
                    <NuformItem label="配置值" prop="name" width="75%">
                        <nu-radioButton :group="groupList" v-model="dialogFormData.config"></nu-radioButton>
                    </NuformItem>
                </NuVerifyForm>
                <nu-button class="dialogSearchButton" type="primary" @click="diaSave"
                    v-if="dialogTitle == '编辑'">保存</nu-button>
                <nu-button class="dialogSearchButton" type="primary" @click="diaSave"
                    v-if="dialogTitle == '新增'">新增</nu-button>
                <nu-button class="dialogSearchButton" type="primary" @click="diaClose">关闭</nu-button>
            </div>
        </nu-dialog>
    </div>
</template>
    
<script>
import nuCol from "@/components/base/col.vue"
import nutbTitle from "@/components/base/tableTitle.vue"
import NuVerifyForm from "@/components/verify-form"
import NuformItem from "@/components/verify-form/form-item.vue"
import nuInput from "@/components/base/input"
import nuSelect from "@/components/base/select"
import nuButton from "@/components/base/button"
import NuTableList from "@/components/tableList/TableFormList"
import nuDialog from "@/components/base/dialog"
import nuRadioButton from "@/components/base/radio-button"
import nuRadio from "@/components/base/radio"
const operates = that => [
    {
        label: '编辑',
        icon: '',
        width: '50px',
        isShow: row => {
            return true;
        },
        disabled: row => {
            return false;
        },
        method: row => {
            that.openEdit(row);
        },
    },
    // {
    //   isShow: row => {
    //     return false;
    //   },
    // },
    {
        label: '禁用',
        icon: '',
        width: '50px',
        render: (h, params) => {
            return h('nu-button', {
                props: {
                    type: 'text'
                },
                class:'tableOperateBtn',
                on: {
                    click: function() {
                        that.forbidden(params.row);
                    },

                }
            }, params.row.status == 1 ? '禁用' : '启用',);
        },
        isShow: row => {
            return true;
        },
        disabled: row => {
            return false;
        },
        method: row => {
            
        },
    },
    {
        label: '删除',
        icon: '',
        width: '50px',
        isShow: row => {
            return true;
        },
        disabled: row => {
            return false;
        },
        method: row => {
            that.tbRowdetele(row);
        },
    },
];
export default {
    name: "parameterConfig",
    components: { nuCol, nutbTitle, NuVerifyForm, NuformItem, nuInput, nuSelect, nuButton, NuTableList, nuDialog, nuRadioButton, nuRadio },
    data() {
        return {
            formData: {
                name: '',
                type: '',
            },
            dialogFormData: {
                name: '',
                type: '',
            },
            dialogShow: false,
            groupList: ['interface', 'http'],
            fyButtons: [],
            dialogTitle: '',
            operates,
            pagination: {
                pageSize: 20,
                total: 0,
                currentPage: 1,
            },
            columns: [
                {
                    label: '序号',
                    prop: 'ranking',
                    width: '70px',
                    render: (h, params) => {
                        return h('span', params.index + 1 + (this.pagination.currentPage - 1) * this.pagination.pageSize);
                    },
                },
                {
                    label: '计量点名称',
                    prop: 'name',
                    width: '135px'
                },
                {
                    label: '电能表厂家型号',
                    width: '150px',
                    prop: 'supplierName',
                },
                {
                    label: '表计地址',
                    prop: 'contractCoalType',
                },
                {
                    label: '遥测量',
                    prop: 'levelName',
                },
                {
                    label: 'CT变比',
                    prop: 'contractType',
                },
                {
                    label: 'PT变比',
                    prop: 'nature',
                },
                {
                    label: '电表小数位',
                    prop: 'shouldDeliverVolume',
                },
                {
                    label: '规约类型',
                    prop: 'actualDeliverVolume',
                },
                {
                    label: '端口类型',
                    prop: 'deliverRate',
                },
                {
                    label: '链路地址',
                    prop: 'evalScore',
                }
            ],
            dataSource: [{}],
            options: {
                'default-expand-all': true,
                'element-loading-background': 'rgba(225,239,242)',
                'element-loading-text': '数据正在加载中',
                'row-key': 'pid',
                'header-cell-style': {
                    background: 'rgba(105, 159, 209, 0.7)',
                    color: '#fff',
                    fontWeight: 'bold',
                    fontsize: '16px',
                },
                height: 'calc(100vh - 310px)',
                props: {
                    fixed: 'right'
                }
            },
        };
    },
    created() {
    },
    mounted() {
        this.getConfigTableData();
    },
    methods: {
        /**
         * 查询
         */
        searchTable() {
            this.$refs['formData'].searchForm('form');
        },
        /**
         * form组件内置查询事件
         */
        searchForm(val) {
            if (val) {
                this.getConfigTableData();
            }
        },
        /**
         * 每页条数变化事件
         */
        handleSizeChange(val) {
            this.pagination.currentPage = 1;
            this.pagination.pageSize = val;
            this.getConfigTableData();
        },
        /**
         * 改变分页触发事件
         */
        handleChangePage(val) {
            this.pagination.currentPage = val;
            this.getConfigTableData();
        },
        /**
         * 新增
         */
        addTable() {
            this.dialogTitle = '新增'
            this.dialogShow = true
        },
        /**
         * 表格-编辑
         */
        openEdit(row) {
            this.dialogTitle = '编辑'
            this.dialogShow = true
            Object.assign(this.dialogFormData, row)
        },
        /**
         * 表格-禁用
         */
        forbidden(row) {
            console.log(row)
        },
        /**
         * dialogFormData组件内置提交事件
         */
        diaSubmitForm(val) {
            if (val) {
                if (this.dialogTitle == '编辑') {
                    this.editStationTableData()
                } else if (this.dialogTitle == '新增') {
                    this.addStationTableData()
                }
            }
        },
        /**
         * 弹窗-保存
         */
        diaSave() {
            this.$refs['dialogFormData'].submitForm('form');
        },
        /**
         * 弹窗-关闭
         */
        diaClose() {
            this.dialogShow = false
            this.resetForm('dialogFormData')
        },
        /**
         * 重置表单
         */
        resetForm(formName) {
            this.$refs[formName].resetForm('form');
            for (let k in this[formName]) {
                this[formName][k] = ''
            }
        },
        /**
         * 表格-删除
         */
        tbRowdetele(row) {
            this.$confirm('确定要删除配置【' + row.name + '】吗？', '确认删除', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.delStationTableData(row)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        /**
         * 获取表格数据
         */
        getConfigTableData() {
            let postData = {
                ...this.formData,
                ...this.pagination,
            };
            for (let k in postData.query) {
                if (postData.query[k] && Object.prototype.toString.call(postData.query[k]) == '[object String]') {
                    postData.query[k] = postData.query[k].toString().trim();
                }
            }
            this.dataSource = [];
            this.$httpGet(window.api.getConfigTable, postData).then(res => {
                if (res.success && res.data) {
                    this.pagination.total = res.totalCount;
                    this.dataSource = res.data;
                } else {
                }
            }).catch(err => {

            });
        },
    }
};
</script>
    
<style scoped lang="scss">
.parameterConfig {
    height: calc(100vh - 70px);
}

// ::v-deep .el-button:hover,
// ::v-deep .el-button:focus {
//     background: #FFFFFF;
//     border: 1px solid #DCDFE6;
//     border-color: #DCDFE6;
// }

.searchForm {
    height: calc(100% - 40px);
    display: flex;
    align-items: center;
    position: relative;
}

.btnBox {
    display: flex;
    float: right;
    z-index: 10;
    position: absolute;
    top: 15px;
    right: 10px;
}

.dialogHeaderSearch {
    background-color: var(--model-bgc);
    padding: 10px;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: right;

    ::v-deep .el_radioView {
        box-shadow: none;

        .el-radio-button {
            margin: 0 5px;
        }
    }
}

// ::v-deep .el-button--medium {
// background: transparent;
// }

// ::v-deep .el-button--medium:hover,
// ::v-deep .el-button--medium:focus {
//     background: transparent;
// }
</style>
    
    